<template>
  <div id="invitingFriends">
    <com-head :opacity="0">邀请好友</com-head>

    <div class="bookcoin">
      <p>已邀请 {{number}}人加入书城</p>
      <div class="img">
        <img src="../assets/image/invite2.png">
      </div>
      <com-button class="btn">邀请书友赢奖金</com-button>
      <div class="img2">
        <img :src="imagema">
      </div>
      <p>邀请书友</p>
      <!-- <p>活动规则：每邀请一位好友，该好友关注本平台并在1个月内未取消关注，邀请者可获取5.0元的佣金奖励，邀请越多，奖励越多。</p> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "invitingFriends",
  data() {
    return {
      number: "0",
      imagema: ""
    };
  },

  computed: {},

  created() {},

  mounted() {
    this.loading();
  },

  methods: {
    loading() {
      this.axios
        .post("user/code", {
          token: this.token()
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.imagema = data.data;
            this.number = data.number;
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>
<style lang='scss' scoped>
#invitingFriends {
  text-align: center;
  background-color: #fff;
  .bookcoin {
    margin-top: 100px;
    .img {
      display: inline-block;
      width: 360px;
      height: 284px;
      img {
        width: 100%;
      }
    }
    p:nth-of-type(1) {
      font-size: 28px;
      line-height: 90px;
      color: rgba(34, 34, 34, 1);
    }
    .btn {
      margin-top: 40px;
      width: 686px;
      height: 78px;
      background: rgba(65, 215, 189, 1);
      border-radius: 4px;
    }
    .img2 {
      margin-top: 60px;
      display: inline-block;
      width: 210px;
      height: 210px;
      // background-color: #222;
      img {
        width: 100%;
      }
    }
    p:nth-of-type(2) {
      margin: 50px auto;
      width: 150px;
      font-size: 26px;
      color: #555555;
      border-bottom: 1Px solid #222;
    }
    p:nth-of-type(3) {
      text-align: left;
      margin: 0 32px;
      font-size: 26px;
      color: #999;
    }
  }
}
</style>